<template>
  <div class="container">
    <img :src="imgList.eggbg_new" alt>
    <img :src="imgList.eggbg_new2" alt>
    <!-- <img :src="imgList.eggbg_new3" alt> -->
    <div class="egg-wrap" style="top: 5rem;" ref="eggAddress">
      <div class="wrap">
        <div class="img-wrap" v-for="(item, i) in eggList" :key="i">
          <img v-if="item.isFlag" :src="item.imgUrl" @click="getLocation($event, i)" alt>
          <img v-else :src="item.clickUrl" alt>
          
          <img v-if="!item.isFlag" class="bool" :src="imgList.bool" alt>
        </div>

        <div class="hammer haha" style="top:0" ref="chuizi" v-show="isHammer">
          <img class="chuizi" :src="imgList.chuizi" alt>
        </div>
      </div>
    </div>
    <div class="hint">
      <p>
        你今日还有
        <span>{{ pageData.sangAll }}</span>次砸蛋机会
      </p>
      <img @click="shareFriends" :src="imgList.share" alt>
    </div>

    <!-- 奖品池 -->
    <div class="award-pool">
      <div class="award-wrap">
        <div class="award-inner" v-for="(item,i) in awardList" :key="i">
          <img :src="item.url" alt>

          <vue-seamless-scroll :data="item.telNum" :class-option="goodsClassOption" class="goods-scroll">
            <ul class="item">
              <li v-for="(item, index ) in item.telNum" :key="index">
                <span class="title" v-text="item"></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>

    <!-- 页面左上角轮播滚动 -->
    <vue-seamless-scroll :data="wheelData" :class-option="classOption" class="seamless-warp">
      <ul class="item">
        <li v-for="(item, i ) in wheelData" :key="i" style="height: 0.41rem;" ref="lineHeight">
          <span class="title" v-text="item"></span>
        </li>
      </ul>
    </vue-seamless-scroll>

    <!-- 活动规则 -->
    <div class="active-ruler" @click="openRuler">
      <span>活动规则</span>
    </div>

    <toast-award v-if="chooseNum" :value="chooseNum" :personValue="personMessage" v-on:listen-to-clild-event="showMsgFromChild"></toast-award>
  </div>
</template>
<script>
// import { ButtonTab, ButtonTabItem } from "vux";
import vueSeamlessScroll from "vue-seamless-scroll";
import VConsole from "VConsole";
import toastAward from "@/components/toastAward";
import Lib from "assets/js/Lib";
import { setTimeout } from "timers";
import { log } from "util";
export default {
  data() {
    return {
      // src: require("../../../assets/images/newyearshop/egg.png"),
      eggList: [],
      isToast: false,
      goodList: [],
      popup: {},
      pageData: {
        sangAll: 0,
        wheelData: []
      },
      wheelData: [],
      isHammer: false, // 锤子icon默认隐藏
      isFlag: true,
      awardNum: [],
      chooseNum: 0, // 传入子组件num，判断显示的奖品
      personMessage: {
        user_id: "",
        token: "",
        uuid: ""
      },
      awardList: [],
      imgList: [],
      moveLength: 0
    };
  },

  computed: {
    classOption: function() {
      return {
        openTouch: false,
        singleHeight: this.moveLength
      };
    },
    goodsClassOption: function() {
      return {
        openTouch: false,
        singleHeight: 26
      };
      m;
    }
  },

  created() {
    this.makeJson();
    this.addImgUrl();
    if (window.location.hostname == "localhost") {
      window.person = {
        token: "fe56b97524e55c9_",
        uuid: "928b4d96-687d-4b4b-85b2-bd4b02d4f553",
        user_id: "20643928697404606"
      };
    }

    (this.personMessage = {
      user_id: window.person.user_id,
      token: window.person.token,
      uuid: window.person.uuid
    }),
      // this.getAward();

      this.$http
        .post(
          `${this.$apis.apis.newYearHome}`,
          this.$qs.stringify({
            user_id: this.personMessage.user_id,
            token: this.personMessage.token,
            uuid: this.personMessage.uuid
          })
        )
        .then(({ data }) => {
          this.pageData = data;
        });
  },

  mounted() {
    this.randomTel();
    var rootFont = 50 * ((document.body.clientWidth * 2) / 750);
    this.moveLength =
      +this.$refs.lineHeight[0].style.height.replace(/[^0-9 .]/gi, "") *
      rootFont;

    // console.log(parseInt(this.$refs.lineHeight[0].style.height) * rootFont);

    // 默认锤子隐藏，若isHammer为false,点击拿不到定位；
    this.isHammer = false;
  },
  methods: {
    // 右上角轮播数据
    makeJson() {
      let telNumList = [];
      let awardListJson = [
        "50元无门槛优惠券",
        "美的取暖器",
        "1元无门槛优惠劵",
        "50元无门槛优惠券",
        "1元无门槛优惠劵"
      ];
      for (let index = 0; index < 15; index++) {
        let arr = [3, 5, 7, 8];
        let num = arr[this.RandomNumBoth(0, 3)].toString();
        let getAward = awardListJson[this.RandomNumBoth(0, 4)];

        let mockTelPhone = "";

        for (let index = 0; index < 4; index++) {
          let temp = parseInt(Math.random() * 10).toString();
          mockTelPhone = mockTelPhone + temp;
        }

        let telNum =
          1 + num + parseInt(Math.random() * 10) + "****" + mockTelPhone;
        let temp = `恭喜${telNum}抽到${getAward}`;
        telNumList.push(temp);
      }
      this.wheelData = telNumList;
    },
    // 图片
    addImgUrl() {
      var baseUrl =
        window.location.host == "a.taojiji.com"
          ? "https://tjjstatic.taojiji.com/wapsite/default/newactivity/newYearShop/"
          : "http://tjjstatic.shan666.com/wapsite/default/newactivity/newYearShop/";

      this.imgList = {
        eggbg_new: baseUrl + "img/eggbg_new.jpg",
        eggbg_new2: baseUrl + "img/eggbg_new2.jpg",
        eggbg_new3: baseUrl + "img/eggbg_new3.jpg",
        bool: baseUrl + "img/bool.png",
        share: baseUrl + "img/share.png",
        chuizi: baseUrl + "img/chuizi.png"
      };

      this.eggList = [
        {
          imgUrl: baseUrl + "img/egg.png",
          clickUrl: baseUrl + "img/mznb.png",
          isFlag: true
        },
        {
          imgUrl: baseUrl + "img/egg.png",
          clickUrl: baseUrl + "img/mznb.png",
          isFlag: true
        },
        {
          imgUrl: baseUrl + "img/egg.png",
          clickUrl: baseUrl + "img/mznb.png",
          isFlag: true
        }
      ];

      console.log(this.eggList);
    },
    // 点击砸蛋
    getLocation(e, i) {
      var that = this;

      // 点击，分享机会-1；为0时，阻止，弹窗提示；
      if (!that.pageData.sangAll) {
        that.$vux.toast.text("您的抽奖机会已用完，请分享得机会");
        return;
      }
      that.isHammer = true;
      if (that.pageData.userType == 1) {
        var num = 1;
        that.sendAward(num, i);
      } else {
        var num = that.RandomNumBoth(0, 1).toString();
        that.sendAward(num, i);
      }

      // 发起请求
      // that.sendAward();

      that.pageData.userType = 0;

      that.popup.x = e.pageX;
      that.popup.y = e.pageY;
      var rootFont = 50 * ((document.body.clientWidth * 2) / 750);
      console.log(rootFont);

      that.$refs.chuizi.style.left = that.popup.x - 15 + "px";
      that.$refs.chuizi.style.top =
        that.popup.y -
        20 -
        parseInt(this.$refs.eggAddress.style.top) * rootFont +
        "px";
    },

    getAward() {
      var arr = [1, 2, 3];
      var result = [];
      var ranNum = 2;
      for (var i = 0; i < ranNum; i++) {
        var ran = Math.floor(Math.random() * (arr.length - i));
        result.push(arr[ran]);
        arr[ran] = arr[arr.length - i - 1];
      }
      this.awardNum = result;
    },

    showMsgFromChild(value) {
      this.chooseNum = value;
      for (let index = 0; index < 3; index++) {
        this.eggList[index].isFlag = true;
      }
    },

    RandomNumBoth(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min + Math.round(Rand * Range); //四舍五入
      return num;
    },

    openRuler() {
      this.chooseNum = 3;
    },

    sendAward(value = 1, index) {
      var that = this;
      this.$http
        .post(
          `${this.$apis.apis.newYearCoupon}`,
          this.$qs.stringify({
            user_id: this.personMessage.user_id,
            token: this.personMessage.token,
            uuid: this.personMessage.uuid,
            type: value
          })
        )
        .then(({ data }) => {
          if (data.userType != 1 && data.userType != 0) {
            this.$vux.toast.text(data.message);
            return;
          }

          this.pageData.sangAll--;
          this.eggList[index].isFlag = false;
          setTimeout(function() {
            that.chooseNum = data.userType.toString();
          }, 800);
        });
    },

    // 随机生成加密手机号
    randomTel() {
      this.awardList = [];
      var baseUrl =
        window.location.host == "a.taojiji.com"
          ? "https://tjjstatic.taojiji.com/wapsite/default/newactivity/newYearShop/"
          : "http://tjjstatic.shan666.com/wapsite/default/newactivity/newYearShop/";
      for (let i = 0; i < 6; i++) {
        this.awardList.push({
          url: `${baseUrl}/img/award${i + 1}.png`
        });
        let telNumList = [];
        for (let index = 0; index < 20; index++) {
          let arr = [3, 5, 7, 8];
          let num = arr[this.RandomNumBoth(0, 3)].toString();
          let mockTelPhone = "";

          for (let index = 0; index < 4; index++) {
            let temp = parseInt(Math.random() * 10).toString();
            mockTelPhone = mockTelPhone + temp;
          }

          let telNum =
            1 + num + parseInt(Math.random() * 10) + "****" + mockTelPhone;
          telNumList.push(telNum);
        }
        this.awardList[i].telNum = telNumList;
      }
    },

    // 分享给朋友
    shareFriends() {
      var that = this;
      if (this.personMessage.user_id == 1) {
        return;
      }
      if (this.pageData.sangShare < 2) {
        setTimeout(function() {
          that.pageData.sangAll++;
          that.pageData.sangShare++;
        }, 500);
        this.$http
          .post(
            `${this.$apis.apis.newYearShare}`,
            this.$qs.stringify({
              user_id: this.personMessage.user_id,
              token: this.personMessage.token,
              uuid: this.personMessage.uuid
            })
          )
          .then(res => {
            // console.log(res);
          });
        this.pageData.userType = 0;
      } else {
        this.$vux.toast.text("您的分享机会已用完！");
      }
      setTimeout(function() {
        yearShare(
          "玩大才过瘾！免费砸金蛋100%中奖更有西门子冰箱等你来拿",
          "活动"
        );
        // share("玩大才过瘾！免费砸金蛋100%中奖更有西门子冰箱等你来拿", "");
      }, 800);
    }
  },
  components: {
    toastAward,
    vueSeamlessScroll
  }
};
</script>
<style lang="less" scoped>
img {
  width: 100%;
  display: block;
}
.container {
  position: relative;
}
.haha {
  transform: rotate(7deg);
}
// 活动规则
.active-ruler {
  position: absolute;
  top: 0.16rem;
  right: 0;
  span {
    display: inline-block;
    width: 1.33rem;
    text-align: center;
    line-height: 0.4rem;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 0.26rem;
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
  }
}

// 滚动条
.seamless-warp {
  position: absolute;
  top: 0.12rem;
  display: inline-block;
  height: 0.82rem;
  overflow: hidden;
  li {
    font-size: 0.17rem;
    font-weight: normal;
    font-stretch: normal;
    padding: 0 0.2rem;
    line-height: 0.41rem;
    height: 0.41rem;
    letter-spacing: 0px;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    color: #ffffff;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
  }
}
.egg-wrap {
  position: absolute;

  .wrap {
    position: relative;
    display: flex;
    box-sizing: border-box;
    padding: 0 0.3rem;
    width: 100%;
  }
  .img-wrap {
    position: relative;
    width: 33.33%;
    padding: 0 0.2rem;
    img {
      width: 100%;
    }
    .bool {
      position: absolute;
      top: 0;
      left: 0.1rem;
      width: 100%;
    }
  }
  img {
    width: 33.33%;
  }
}
.chuizi {
  width: 100%;
}
.hammer {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  img {
    width: 100%;
  }
}

.hint {
  position: absolute;
  width: 100%;
  top: 8.4rem;
  text-align: center;
  img {
    width: 3.29rem;
    margin: 0 auto;
  }
  p {
    font-size: 0.3rem;
    color: #fff;
    margin: 0.05rem 0;
  }
}

.award-pool {
  position: absolute;
  top: 10rem;
  width: 100%;
  background-color: #e65a5e;
  .award-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0.4rem 0.7rem;
    padding-top: 1.27rem;
    border-radius: 0.12rem;
    background: #ffdef3 url(../../../assets/images/newyearshop/title.jpg)
      no-repeat;
    background-size: contain;
    .award-inner {
      position: relative;
      width: 50%;
      height: 2.26rem;
      border: 1px solid #ccc;
      box-sizing: border-box;
      img {
        position: absolute;
        width: 2.5rem;
        left: 12.5%;
      }
    }
    .goods-scroll {
      height: 0.78rem;
      overflow: hidden;
      text-align: center;
      margin-top: 0.1rem;
      li {
        font-size: 0.24rem;
        height: 0.26rem;
        line-height: 0.26rem;
      }
    }
  }
}
</style>

